<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status" :style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
		<!-- 头部信息 -->
		<view class="user_info" :class="{sm}" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<view class="img"><image src="/static/temp/icon_1.png"></image></view>
			<view class="text">早，林达达</view>
			<view class="iconfont icontongzhi ic">
				<!-- <view class="bage">···</view> -->
				<view class="bage">3</view>
			</view>
		</view>
		<view class="user_info_seat"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
				</view>
				
			</view>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item">
				<image src="/static/temp/c1.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c2.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c4.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>儿童营地</text>
			</view>
		</view>
		<!-- 完善资料 -->
		<view class="go_data">
			<view class="img"><image src="/static/temp/icon_1.png"></image></view>
			<view class="text">为确保您的课程与相应门店匹配，<br>请您尽快完善身份信息</view>
			<view class="go">去完善 <view class="iconfont iconiconfont07"></view></view>
		</view>
		 <!-- 广告位 -->
		<view class="ad-1">
			<image src="/static/temp/ad-1.png"></image>
			<image src="/static/temp/ad-2.png"></image>
		</view>
		<!-- 最新活动标题 -->
		<view class="list-title">
			<text class="left">最新活动</text>
			<view class="right">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 最新活动列表 -->
		<view class="list-activity">
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="ing">报名中</label>6月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="done">已结束</label>月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="full">报名中</label>6月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="wait">报名中</label>6月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
		</view>
		<!-- 线上课程标题 -->
		<view class="list-title">
			<text class="left">线上课程</text>
			<view class="right">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 线上课程列表 -->
		<view class="list-course">
			<image src="/static/temp/ad-1.png"></image>
			<image src="/static/temp/ad-2.png"></image>
		</view>
		<!-- 优选活动标题 -->
		<view class="list-title">
			<text class="left">优选活动</text>
			<view class="right">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 优选活动列表 -->
		<view class="list-good">
			<view class="item">
				<image src="/static/temp/ad-2.png"></image>
			</view>
			<view class="item self">
				<image src="/static/temp/ad-1.png"></image>
				<image src="/static/temp/ad-2.png"></image>
			</view>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item">
				<image src="/static/temp/c1.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c2.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c4.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>儿童营地</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c1.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c2.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c4.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>儿童营地</text>
			</view>
		</view>
		<!-- 推荐文章顶图 -->
		<image src="../../static/temp/tuijian.png" class="tuijian_img"></image>
		<!-- 推荐文章列表 -->
		<view class="list-introduce">
			<view class="item">
				<view class="imgs">
					<image src="/static/temp/ad-1.png"></image>
					<image src="/static/temp/ad-2.png"></image>
					<image src="/static/temp/ad-1.png"></image>
				</view>
				<view class="title">他家的12M+三色芝士心饭团，能给孩子当手指食物美味与美貌并存，宝妈快快买来做！他家的12M+三色芝士心饭团，能给孩子当手指食物美味与美貌并存，宝妈快快买来做！</view>
				<view class="subtitle">
					<view class="img"><image src="/static/temp/icon_1.png"></image></view>
					<view class="text">林达达</view>
					<view class="more">查看全文</view>
				</view>
			</view>
			<view class="item">
				<view class="imgs">
					<image src="/static/temp/ad-1.png" mode="aspectFill"></image>
					<image src="/static/temp/ad-2.png" mode="aspectFill"></image>
					<image src="/static/temp/ad-1.png" mode="aspectFill"></image>
				</view>
				<view class="title">他家的12M+三色芝士心饭团，能给孩子当手指食物美味与美貌并存，宝妈快快买来做！</view>
				<view class="subtitle">
					<view class="img"><image src="/static/temp/icon_1.png"></image></view>
					<view class="text">林达达</view>
					<view class="more">查看全文</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				afterHeaderOpacity: 1,//不透明度
				headerPosition: 'fixed',
				headerTop:null,
				statusTop:null,
				currentSwiper: 0,
				sm:"",
				// 轮播图片
				swiperList: [
					{ id: 1, src: 'url1', img: '../../static/temp/banner1.jpg' },
					{ id: 2, src: 'url2', img: '../../static/temp/banner2.jpg' },
					{ id: 3, src: 'url3', img: '../../static/temp/banner3.jpg' },
					{ id: 4, src: 'url4', img: '../../static/temp/banner4.jpg' }
				],
			};
		},
		onLoad: function (options) {
			setTimeout(function () {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			// //兼容iOS端下拉时顶部漂移
			// this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			// this.headerTop = e.scrollTop>=0?null:0;
			// this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
			this.sm = e.scrollTop>=100?"sm":"";
		},
		methods: {
			//轮播图跳转
			toSwiper(e) {
				uni.showToast({ title: e.src, icon: 'none' });
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			}
			
		}
		
	}
</script>

<style lang="scss">
	
	page {
		background: #fff;
	}
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	.user_info_seat{
		height: 150upx;
		/*  #ifdef  APP-PLUS  */
		height: 200upx; //覆盖样式
		/*  #endif  */
	}
	/* 头部信息 早，... */
	.user_info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:$page-row-spacing;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		transition: all 0.5s;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.img{
			transition: all 0.5s;
			width: 50upx;
			height: 50upx;
			border-radius: 50upx;
			margin-right: 22upx;
			image{
				transition: all 0.5s;
				width: 50upx;
				height: 50upx;
			}
		}
		.text{
			transition: all 0.5s;
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			font-size: 48upx;
			color: #333;
			font-weight: bold;
		}
		.ic{
			transition: all 0.5s;
			font-size: 48upx;
			position: relative;
			.bage{
				transition: all 0.5s;
				background: #fe8700;
				color: #fff;
				font-size: 24upx;
				position:absolute;
				top:-25%;
				right:-25%;
				height: 32upx;
				border-radius: 50upx;
				padding:0 13upx;
			}
		}
		&.sm{
			// transform:scale(.465);
			padding:17upx 36upx;
			.img{
				transform:scale(.75);
				// width: 40upx;
				// height: 40upx;
				// border-radius: 50upx;
				// margin-right: 22upx;
				// image{
				// 	width: 40upx;
				// 	height: 40upx;
				// }
			}
			.text{
				transform:scale(0.75) translateX(-20%);
				// font-size: 36upx;
				
			}
			.ic{
				// font-size: 36upx;
				// position: relative;
				transform:scale(.75);
				.bage{
					transform:scale(.75);
					// background: #fe8700;
					// color: #fff;
					// font-size: 20upx;
					// position:absolute;
					// top:-25%;
					// right:-25%;
					// height: 32upx;
					// border-radius: 50upx;
					// padding:0 13upx;
				}
			}
		}
	}
	/* 顶部轮播图 */
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height: 30.4vw;	
			overflow: hidden;
			border-radius: 15upx;
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			margin: 0 $page-row-spacing;
			swiper {
				width: 100%;
				height: 30.5vw;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/4);
					}
				}
			}
		}
	}	
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap:wrap;
		padding: 17upx $page-row-spacing - 10upx; 
		background: #fff;
		.cate-item {
			display: flex;
	 		flex-direction: column;
			align-items: center;
			font-size: $font-sm - 2upx;
			color: $font-color-dark;
			min-width: 20%;
			margin: 18upx 0;
		}
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}
	/*完善资料*/
	.go_data{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:17upx $page-row-spacing;
		margin-bottom: $page-row-spacing;
		background: #fff9f2;
		border-radius: 12upx;
		padding: 29upx;
		.img{
			width: 78upx;
			height: 78upx;
			border-radius: 50upx;
			margin-right: 22upx;
			image{
				width: 78upx;
				height: 78upx;
			}
		}
		.text{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			font-size: 26upx;
			line-height: 41upx;
			color: #fe8700;
		}
		.go{
			background: #fe8700;
			color: #fff;
			font-size: 20upx;
			border-radius: 6upx;
			padding: 3upx 13upx;
			line-height:30upx;
			.iconfont{
				font-size: 18upx;
				display: inline-block;
				vertical-align: baseline;
				line-height:30upx;
			}
			&:active{
				background: #df7700;
				color: #e0e0e0;
			}
		}
	}
	/* 广告位 */
	.ad-1{
		width: 100%;
		height: 24vw; 
		padding: 17upx 25upx;
		background: #fff;
		display: flex;
		image{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height: 100%;
			border-radius: 12upx;
		}
	}
	/*列表标题*/
	.list-title{
		margin-top: 36upx;
		margin-bottom: 13upx;		
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0 $page-row-spacing;
		.left{
			color: $font-color-dark;
			font-size: 40upx;
			font-weight: bold;
		}
		.right{
			font-size: $font-sm;
			color: #999;
			.iconfont{
				display: inline-block;
				vertical-align: baseline;
				font-size: $font-sm;
			}
		}
	}
	/*活动列表*/
	.list-activity{
		padding: 0 $page-row-spacing;
		.item{
			padding: 14upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 200upx;
				height: 150upx;
				border-radius:12upx;
				overflow: hidden;
			} 
			.right{
				margin-left: 20upx;
				flex: 1;
				.title{
					font-size: 28upx;
					color: $font-color-dark;
					height: 80upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					label{
						display: inline-block;
						font-size: 20upx;
						border-radius: 4upx;
						margin-right: 14upx;
						padding: 8upx 12upx;
						line-height:17upx;
						height: 30upx;
						&.ing{
							background: linear-gradient(to right, #42e55e , #36d248);
							color: #fff;
						}
						&.done{
							background: #e5e5e5;
							color: #989898;
						}
						&.full{
							background: linear-gradient(to right, #fb4d69 , #ff4455);
							color: #fff;
						}
						&.wait{
							background: linear-gradient(to right, #ff9e2c , #fe8700);
							color: #fff;
						}
					}
				}
				.subtitle{
					font-size: 22upx;
					color: #b3b3b3;
					margin-top:28upx;
					display: inline-block;
				}
				
			}
		}
		
	}
	/*线上课程列表*/
	.list-course{
		width: 100%;
		height: 29vw; 
		padding: 17upx 25upx;
		background: #fff;
		display: flex;
		image{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height: 100%;
			border-radius: 12upx;
		}
	}
	/*优选活动列表*/
	.list-good{
		width: 100%;
		height:60vw;
		padding: 17upx 25upx;
		background: #fff;
		display: flex;
		.item{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height:100%;
			image{
				width:100%;
				height:100%;
				border-radius: 12upx;
			}
			&.self{
				flex-direction: column;
				display: flex;
				justify-content: space-between;
				image{
					height: 27vw; 					
				}
			}
		}
	}
	/*推荐文章顶图*/
	.tuijian_img{
		padding: 0 $page-row-spacing;
		margin: 17upx 0;
		width: 100%;
		height: 10vw;
	}
	.list-introduce{
		padding: 0 $page-row-spacing;
		margin: 17upx 0;
		.item{
			.imgs{
				display: flex;
				align-items: center;
				justify-content:space-between;
				height: 28.355vw;				
				image{
					width: 100%;
					height: 100%;
					margin-right: 20upx;
					border-radius: 20upx;
					&:last-child{
						margin-right: 0;
					}
				}				
			}
			.title{
				font-size: 28upx;
				color: $font-color-dark;
				margin:28upx 10upx;
				height: 80upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.subtitle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;				
				font-size: 24upx;
				color: #808080;
				padding-bottom: 50upx;
				.img{
					width: 36upx;
					height: 36upx;
					border-radius: 50upx;
					margin-right: 10upx;
					image{
						width: 36upx;
						height: 36upx;
					}
				}
				.text{
					width: 0;
					-webkit-box-flex: 1;
					-ms-flex: 1;
					-webkit-flex: 1;
					flex: 1;
				}
				.more{
				}
			}
		}
	}
</style>
